<template>
	<view class="fa-g">
		<view class="fd_btns">
			<text class="kai-btn" @click="$navTo('/pages/groupbuy/businessQuota?type=3')">使用明细</text>
			<!-- <text class="kai-btn" v-if="validNum!=0" @click="sumbit('piliang')">批量开团</text> -->
			<text class="kai-btn" v-if="validNum!=0" @click="sumbit(3)">申请开团</text>
			<!-- <text class="kai-btn"  @click="sumbit('piliang')">批量开团</text> -->
		</view>
		<view class="fg-t">
			<text class="fa-g-num">发团权益卡剩余：{{validNum || 0}}张</text>

		</view>
		<view class="fg-list">
			<view class="fgl-item" v-for="item,i in list">
				<image class="shop-image" :src="item.pintuan_card_info.img" ></image>
				<view class="fg-l-i-r">
					<view>
						<view class="title">{{item.pintuan_card_info.name}}</view>
						<view class="time">
							<text v-if="item.status==1">有效期至：</text>
							<text v-if="item.status==0">冷却期至：</text>
							<text>{{item.expire_time}}</text>
						</view>
						<view class="card">
							<text>{{item.pintuan_card_info.success_num}} 人团</text>
							<text class="bg1" v-if="item.status==0">冷却中</text>
							<text class="bg2" v-else-if="item.status==1">可使用</text>
							<!-- <text class="bg3" v-else-if="item.status==2">审核中</text> -->
						</view>
					</view>
					<view class="r-bottom">
						<view class="money">
							<text class="val">{{item.pintuan_card_info.price}}</text>
							<text>元/人</text>
						</view>
						<!-- <text class="fa-btn" @click="openRedPoints(item)" v-if="item.status==1">兑换积分</text> -->
						<text class="fa-btn bg" v-if="item.status==0">暂不可用</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty_loading2">
			<image v-if="isloading" src="/static/business/loading.gif"></image>
			<view v-if="isempty">———— <text>没有更多了</text> ————</view>
		</view>
		<uni-popup ref="pPopup" type="center">
			<view class="p-list">
				<view class="title">批量开团</view>
				<view class="p-l-i">
					<text>使用权益卡类型 :</text>
					<uni-data-select :key="1" v-model="piBody.cardType" :localdata="piList" @change="piChange"
						placeholder="请选择开团卡类型"></uni-data-select>
				</view>
				<view class="p-l-i">
					<text>最大可开团数量 {{oldNum||0}} :</text>
					<uni-easyinput :key="2" type="number" v-model="piBody.num" placeholder="请输入要使用卡的数量"></uni-easyinput>
				</view>
				<button class="p-btn" @click="piSumbit">提交批量开团</button>
			</view>
		</uni-popup>
		<promptPopup ref="promptPopup"  @config="popupConfig" />
		<redPoints ref="redPoints" :red_points="red_points" :cardId="cardId" @config="redPointsConfig"/>
	</view>
</template>

<script>
	import promptPopup from './components/prompt-popup.vue';
	import redPoints from './components/redPoints.vue';
	export default {
		components: {
			redPoints,
			promptPopup
		},
		data() {
			return {
				type: 1,
				isloading: false,
				isempty: false,
				page: 0,
				list: [],
				validNum: 0,
				groupData: {},
				piList: [], //卡类型
				piBody: {
					cardType: '',
					num: ''
				},
				oldNum: 0,
				red_points:'',
				cardId:''
			}
		},
		onLoad() {
			this.getCreditinfo()
			this.init()
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			 openRedPoints(val) {
				this.cardId=val.id
				this.$axios('RedPoints/exc_bef', 'POST', 'pt',{
					id:this.cardId
				}).then(res=>{
					if (res.data.code == 200) {
						console.log('this.id????????',this.cardId);
						this.red_points=res.data.data.red_points
						this.$refs.redPoints.open()
					}
				})
			},
			// 初始化列表
			init() {
				this.page = 0
				this.list = []
				this.getList()
			},
			piChange(e) {
				let num = this.piList.find(item => item.value == e)
				this.piBody.num = num ? num.num : ''
				this.oldNum = num ? num.num : 0
			},
			piSumbit() {
				if (!this.piBody.num || !this.piBody.cardType) {
					return this.$api.msg('请完善批量开团信息！')
				}
				const newNum = Number(this.piBody.num) || 0
				if (newNum > Number(this.oldNum)) {
					return this.$api.msg('超出最大可开团数量！')
				}
				if (newNum <= 0) {
					return this.$api.msg('请正确填写要使用的权益卡数量！')
				}
				this.$refs.pPopup.close()
				this.sumbit(1)
			},
			// 获取余额
			async getCreditinfo() {
				let res = await this.$axios('Group/getCreditInfo', 'POST', 'pintuan')
				if (res.data.code == 200) {
					this.validNum = res.data.data.rightsCreditRemain || 0
				}
			},
			async sumbit(e, item) {
				if (e == 2) {
					this.groupData = item
				}
				let obj = {}
				this.type = e
				if (e == 'piliang') {
					this.piBody = {
						cardType: '',
						num: ''
					}
					uni.hideLoading()
					uni.showLoading({
						title: '请稍后'
					})
					const res = await this.$axios('Group/getCardTypeNum', 'POST', 'pintuan', {}, 1)
					uni.hideLoading()
					if (res.data.code == 200) {
						let arr = res.data.data || []
						this.piList = arr.map((item) => {
							return {
								text: item.name,
								value: item.cardtype,
								num: item.num
							}
						})
						this.$refs.pPopup.open()
					} else {
						uni.showModal({
							title: '温馨提示',
							content: res.data.data,
						})
					}
					return
				}
				if (e == 1) {
					obj.content = `您已批量选中 ${this.piBody.num} 张发团权益卡，该权益卡一经确认使用后将无法撤回。若您已明确使用意向，请点击下方“确认使用“按钮完成操作。`
				}
				if (e == 2) {
					obj.content = '您当前正在使用发团权益卡，该权益卡一经确认使用后将无法撤回。若您已明确使用意向，请点击下方“确认使用“按钮完成操作。'
				}
				if (e == 3) {
					obj.title = '申请确认'
					obj.content = '确认使用发团权益卡申请开团，权益卡一经使用无法撤回！'
				}
				this.$refs.promptPopup.open(obj)
			},
			redPointsConfig(){
				this.init()
				this.getCreditinfo()
			},
			async popupConfig(e) {
				// type 1:批量 2:立即,3申请开团
				if (this.type == 3 && e == true) {
					uni.showLoading({
						title: '请稍后'
					})
					const res = await this.$axios('DateGroup/rightsApply', 'POST', 'pintuan', {}, 1)
					uni.hideLoading()
					uni.showModal({
						title: '温馨提示',
						content: res.data.data,
						success: () => {
							if (res.data.code == 200) {
								this.init()
								this.getCreditinfo()
							}
						}
					});
					return
				}
				let card_ids = this.type == 1 ? '' : this.groupData.id
				if (e == true) {
					uni.showLoading({
						title: '请稍后'
					})
					this.$axios('Group/genPintuanBatchLimit', 'POST', 'pintuan', {
						type: this.type,
						card_ids,
						...this.piBody
					}, 1).then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							uni.showModal({
								title: '提示',
								content: '操作成功',
								success: () => {
									uni.redirectTo({
										url: "/pages/groupbuy/mygroup?type=self"
									})
								}
							});
						} else {
							this.$api.msg(res.data.data)
						}
					})
				}
			},
			getList() {
				this.page++;
				this.isloading = true;
				this.isempty = false;
				this.$axios('Group/getRightsCredit', 'POST', 'pintuan', {
					page: this.page,
					limit: 10
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.isempty = res.data.data.list.length <= 0;
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fdf8ff;
		padding-bottom: 30rpx;
	}

	text {
		font-family: Microsoft YaHei;
	}

	.fd_btns {
		margin: 20rpx auto;

		.kai-btn {
			display: inline-block;
			width: 348rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 16rpx;
			background: #9A1FE8;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-left: 15rpx;
		}
	}

	.fa-g {
		.fg-t {
			padding: 30rpx 32rpx;
			padding-top: 0;
			position: relative;
			display: flex;
			justify-content: space-between;

			&::before {
				content: '';
				width: 4rpx;
				height: 24rpx;
				position: absolute;
				left: 20rpx;
				top: 35%;
				transform: translateY(-50%);
				background: #9A1FE8;
			}

			.fa-g-num {
				font-size: 28rpx;
				line-height: 64rpx;
				font-weight: bold;
			}


		}

		.fg-list {
			padding: 0 20rpx;

			.fgl-item {
				padding: 16rpx 10rpx;
				background-color: #fff;
				width: 710rpx;
				// height: 280rpx;
				border-radius: 24rpx;
				margin: 0 auto 24rpx;
				display: flex;
				box-sizing: border-box;

				.shop-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 24rpx;
				}

				.fg-l-i-r {
					flex: 1;
					display: flex;
					padding-left: 20rpx;
					// height: 248rpx;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						color: #13001E;
					}

					.time {
						padding-top: 14rpx;
						font-size: 24rpx;
						color: #5B5B5B;
					}

					.card_order {
						padding-top: 0;
					}

					.card {
						padding-top: 10rpx;

						text {
							display: inline-block;
							width: 102rpx;
							height: 38rpx;
							line-height: 38rpx;
							text-align: center;
							border-radius: 8rpx;
							background: #9A1FE8;
							font-size: 24rpx;
							font-weight: bold;
							margin-right: 20rpx;
							color: #fff;
						}

						.color {
							background: transparent;
							color: #9A1FE8;
						}

						.bg1 {
							background: #858585;
						}

						.bg2 {
							background: #FDF8FF;
							color: #9A1FE8;
						}

						.bg3 {
							background: rgba(#9A1FE8, 0.3);
							color: #fff;
						}
					}

					.r-bottom {
						display: flex;
						justify-content: space-between;

						.money {
							display: flex;
							align-items: flex-end;
							color: #9A1FE8;

							.val {
								font-weight: 700;
								font-size: 36rpx;
								margin-right: 10rpx;
							}
						}

						.fa-btn {
							width: 172rpx;
							height: 64rpx;
							line-height: 64rpx;
							text-align: center;
							border-radius: 16rpx;
							background: #9A1FE8;
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
						}

						.bg {
							color: #9A1FE8;
							background: rgba(154, 31, 232, 0.1);
						}
					}
				}
			}
		}
	}

	.p-list {
		background-color: #f2f2f2;
		border-radius: 15rpx;
		width: 690rpx;
		padding: 0 20rpx 50rpx;

		.title {
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.p-l-i {
			font-size: 28rpx;
			padding-top: 20rpx;

			text {
				display: inline-block;
				line-height: 50rpx;
				padding-bottom: 10rpx;
			}
		}

		.p-btn {
			background: linear-gradient(98deg, #FF38E5 0%, #8813E2 61%);
			color: #fff;
			margin-top: 30rpx;
			font-size: 30rpx;
			height: 84rpx;
			line-height: 84rpx;
		}
	}
</style>